<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
   <title>股市舆情可视化</title>
   <link rel="stylesheet" href="/static/css/bootstrap.min.css">
   <script src="../static/js/StockVisual/echarts.js"></script>
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="/static/js/bootstrap.min.js"></script>
   <script src="/static/js/vue.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">股市舆情可视化</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="active nav-item"><a class="nav-link" href="/"><span class="oi oi-bar-chart"></span> 历史交易行情</a></li>
        <li class="nav-item"><a class="nav-link" href="/wordcloud"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 股票舆情云图</a></li>
        <li class="nav-item"><a class="nav-link" href="/dicopinion"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span> 情感字典舆情统计</a></li>
        <li class="nav-item"><a class="nav-link" href="/nbopinion"><span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span> 机器学习舆情预测</a></li>
    </ul>
</div>
</nav>


    <div class="container">
      <div class="panel panel-default ">
        <div class="panel-heading ">个股历史交易行情查询</div>
          <div class="panel-body">
            <p class="lead">输入完整的股票代码，支持字母和数字同时输入</p>
            <form class="form-inline" action="/stockKLine/" role="form" method="get">
                <div class="form-group">
                  <label class="sr-only" for="Inputstock"></label>
                  <input type="text" class="form-control" name="stocknum" id="gettext3" placeholder="输入股票代码"/>
                </div>
                <button type="submit" class="btn btn-primary">查询 <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
            </form>   
        </div>
      </div>
    </div>

    <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">K线图示例</div>
      <div class="panel-body">
                   <div class="col-md-12 col-xs-12">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="main" style="width:100%;height:400px;"></div>
                </div>
      </div>
    </div>
    </div>

    <script type="text/javascript">
        
        var myChart = echarts.init(document.getElementById('main'));
        // 基于准备好的dom，初始化echarts实例
        var datet = {{date|safe}}
        var opent = {{open|safe}}
        var closet = {{close|safe}}
        var hight = {{high|safe}}
        var lowt = {{low|safe}}
        var volumest = {{volume|safe}}
        var dataMA5t = {{dataMA5|safe}}
        var dataMA10t = {{dataMA10|safe}}
        var dataMA20t = {{dataMA20|safe}}
        var stockname = {{stock_name|safe}};
        
        
        var date = datet.reverse();
        var open = opent.reverse();
        var close = closet.reverse();
        var high = hight.reverse();
        var low = lowt.reverse();
        var volumes = volumest.reverse();
        var dataMA5 = dataMA5t.reverse();
        var dataMA10 = dataMA10t.reverse();
        var dataMA20 = dataMA20t.reverse();

        var data ={
            open_price: open,
            close_price: close
            
        }
        var vm = new Vue({
            data: data
        })

        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
        var labelFont = 'bold 12px Sans-serif';

        function calculateMA(dayCount, data) {
            var result = [];
            for (var len = data.length; i < len; len--) {
                if (i < dayCount) {
                    result.push('-');
                    continue;
                }
                var sum = 0;
                for (var j = 0; j < dayCount; j++) {
                    sum += data[i - j][1];
                }
                result.push((sum / dayCount).toFixed(2));
            }
            return result;
        }
        var data = [[]];
        for (var i = open.length; i>=0;i--){
            var datatemp =[0,0,0,0,0];
            datatemp[0] = open[i];
            datatemp[1] = close[i];
            datatemp[2] = low[i];
            datatemp[3] = high[i];
            datatemp[4] = volumes[i];
            data.push(datatemp);
        }
        var data1 = data.reverse();
        var option = {
            animation: false,
            color: colorList,
            title: {
                left: 'center',
                text: stockname
            },
            legend: {
                top: 30,
                data: ['日K', 'MA5', 'MA10', 'MA20']
            },
            tooltip: {
                triggerOn: 'none',
                transitionDuration: 0,
                confine: true,
                bordeRadius: 4,
                borderWidth: 1,
                borderColor: '#333',
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: {
                    fontSize: 12,
                    color: '#333'
                },
                position: function (pos, params, el, elRect, size) {
                    var obj = {
                        top: 60
                    };
                    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                    return obj;
                }
            },
            axisPointer: {
                link: [{
                    xAxisIndex: [0, 1]
                }]
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: [0, 1],
                realtime: false,
                start: 20,
                end: 70,
                top: 65,
                height: 20,
                handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '120%'
            }, {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 40,
                end: 70,
                top: 30,
                height: 20
            }],
            xAxis: [{
                type: 'category',
                data: date,
                boundaryGap : false,
                axisLine: { lineStyle: { color: '#777' } },
                axisLabel: {
                    formatter: function (value) {
                        return echarts.format.formatTime('MM-dd', value);
                    }
                },
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    show: true
                }
            }, {
                type: 'category',
                gridIndex: 1,
                data: date,
                scale: true,
                boundaryGap : false,
                splitLine: {show: false},
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: { lineStyle: { color: '#777' } },
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    type: 'shadow',
                    label: {show: false},
                    triggerTooltip: true,
                    handle: {
                        show: true,
                        margin: 30,
                        color: '#B80C00'
                    }
                }
            }],
            yAxis: [{
                scale: true,
                splitNumber: 2,
                axisLine: { lineStyle: { color: '#777' } },
                splitLine: { show: true },
                axisTick: { show: false },
                axisLabel: {
                    inside: true,
                    formatter: '{value}\n'
                }
            }, {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }],
            grid: [{
                left: 20,
                right: 20,
                top: 110,
                height: 120
            }, {
                left: 20,
                right: 20,
                height: 40,
                top: 260
            }],
            graphic: [{
                type: 'group',
                left: 'center',
                top: 70,
                width: 300,
                bounding: 'raw',
                children: [{
                    id: 'MA5',
                    type: 'text',
                    style: {fill: colorList[1], font: labelFont},
                    left: 0
                }, {
                    id: 'MA10',
                    type: 'text',
                    style: {fill: colorList[2], font: labelFont},
                    left: 'center'
                }, {
                    id: 'MA20',
                    type: 'text',
                    style: {fill: colorList[3], font: labelFont},
                    right: 0
                }]
            }],
            series: [{
                name: 'Volume',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '#7fbe9e'
                    },
                    emphasis: {
                        color: '#140'
                    }
                },
                data: volumes
            }, {
                type: 'candlestick',
                name: '日K',
                data: data,
                itemStyle: {
                    normal: {
                        color: '#ef232a',
                        color0: '#14b143',
                        borderColor: '#ef232a',
                        borderColor0: '#14b143'
                    },
                    emphasis: {
                        color: 'black',
                        color0: '#444',
                        borderColor: 'black',
                        borderColor0: '#444'
                    }
                }
            }, {
                name: 'MA5',
                type: 'line',
                data: dataMA5,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            }, {
                name: 'MA10',
                type: 'line',
                data: dataMA10,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            }, {
                name: 'MA20',
                type: 'line',
                data: dataMA20,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            }]
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize(); //使第一个图表适应
        }
    </script>


    
</body>
</html>
